<template>
  <div>
    <a-form-model ref="ha_roleForm" :rules="rules" :model="ha_role">
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="名称" prop="name" has-feedback required>
        <a-input v-if="!isView" allow-clear v-model="ha_role.name" :maxLength="50" placeholder="请输入名称" />
        <span v-text="ha_role.name" v-else></span>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="描述" prop="description" has-feedback>
        <a-textarea :rows="4" v-if="!isView" :maxLength="500" v-model="ha_role.description" placeholder="描述" />
        <span v-text="ha_role.description" v-else></span>
      </a-form-model-item>
      <a-form-model-item>
        <div style="text-align: center">
          <a-input type="hidden" :disabled="true" v-model="ha_role.id" />
          <a-button :style="{ marginRight: '8px' }" icon="close" @click="onClose"> 关闭 </a-button>
          <a-button :style="{ marginRight: '8px' }" icon="reload" @click="resetForm" v-if="!isView"> 重置 </a-button>
          <a-button type="primary" @click="onSubmit" icon="save" :loading="loading" v-if="!isView"> 保存 </a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
/* eslint-disable */
import { saveHa_role, viewHa_role } from '@/api/base/ha_role'
export default {
  data() {
    return {
      labelCol: { span: 6 }, // label宽
      wrapperCol: { span: 18 }, // 组件宽
      loading: false, //按钮显示
      isView: false, //是否查看
      ha_role: {
        id: '',
        name: '',
        description: '',
      }, //角色信息
      rules: { name: { required: true, message: '请输入角色名!', trigger: 'change' } },
    }
  },
  created() {},
  methods: {
    /**
     * 调用父组件的方法收起抽屉
     */
    onClose() {
      this.$emit('close')
    },
    /**
     * 提供给父组件调用
     * 点击新增进入时重置表单数据
     */
    resetHa_role() {
      this.isView = false
      this.resetForm()
    },
    /**
     * 提供给父组件调用
     * 查询用户信息
     */
    findHa_roleById(id, isView) {
      this.isView = isView
      this.resetForm()

      viewHa_role(id).then((res) => {
        this.ha_role = res.data
        /**
         *  枚举如果不能显示中文打开下面的代码
         */
      })
    },
    /**
     * 重置表单
     */
    resetForm() {
      this.$refs.ha_roleForm.resetFields()
    },
    /**
     * 提交表单
     */
    onSubmit() {
      this.$refs.ha_roleForm.validate((valid) => {
        this.loading = true
        if (valid) {
          delete this.ha_role.primaryKey
          console.log('submit!', this.ha_role)
          const savem = this.$message.loading('数据正在保存中...', 0)
          saveHa_role(this.ha_role).then((res) => {
            if (res.code !== 0) {
              setTimeout(savem, 0)
              this.$message.error('角色保存失败')
              this.loading = false
            } else {
              setTimeout(savem, 0)
              this.$message.success('保存成功')
              this.$emit('reloadList')
              this.$emit('close')
              this.loading = false
            }
          })
        } else {
          this.loading = false
          // 加延时器的目的是为了vue实例更新未完成，我们可能获取DOM失败的问题
          // 利用原生js的方式，获取所有失败的类名，获得一个数组，取第一个元素获取焦点
          setTimeout(() => {
            const isError = document.getElementsByClassName('has-error')
            const input = isError[0].querySelector('input')
            //console.log(input)
            if (input !== null && input !== 'undefind' && input !== '') {
              isError[0].querySelector('input').focus()
                ? isError[0].querySelector('input').focus()
                : isError[0].querySelector('input').click()
            } else {
              isError[0].querySelector('textarea').focus()
            }
          }, 10)
          return false
        }
      })
    },
    /**
     * 取消预览,没有用到附件请删除
     */
    handleImgCancel() {
      this.previewVisible = false
    },
    /**
     * 预览图片,没有用到附件请删除
     */
    async handleImgPreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    /**
     * 图片改变,没有用到附件请删除
     */
    imgChange({ fileList }) {
      this.imgList = fileList
    },
    /**
     * 附件改变,没有用到附件请删除
     */
    fileChange({ file, fileList }) {
      if (file.status !== 'uploading') {
        console.log(file, fileList)
      }
    },
    /**
     * 自定义上传方法,没有用到附件请删除
     */
    customRequest(data) {
      const parameter = new FormData()
      parameter.append('file', data.file)
      this.uploadFile(parameter, data)
    },
    /**
     * 上传附件,没有用到附件请删除
     */
    uploadFile(parameter, data) {
      console.log(parameter, data)
      minioUpload(parameter).then((res) => {
        console.log('res', res)
        if (res.code !== 0) {
          data.onError()
          this.$message.error(res.msg)
        } else {
          data.onSuccess()
        }
      })
    },
  },
}
</script>
<style lang="less" src="@/style/base.less">
</style>